<template>
  <div
      class="top-movie-board"
      :style="{ background: backgroundStyle }"
      ref="container"
      @scroll="handleScroll"
  >
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <button @click="goBack" class="back-btn">
        <span>←</span> 返回主页
      </button>
    </div>
    <!-- 单元一：人物榜 -->
    <section ref="unitPeople" class="unit-section">
      <h1 class="unit-title">人物榜</h1>
      <div class="ranking-page">
        <!-- 🎭 最受欢迎演员 -->
        <section class="page page-people-actor">
          <div class="ranking-section actor-bg">
            <h2 class="section-title">🎭 最受欢迎演员</h2>
            <ol class="person-list">
              <li
                  v-for="(actor, index) in topActors"
                  :key="index"
                  class="person-item"
              >
                <div class="person-info">
                  <strong>{{ actor.actor || actor.name }}</strong>
                  <span>（{{ actor.favorCount || actor.count }} 次）</span>
                </div>
                <div v-if="actor.representativeWork" class="work-line">
                  <el-tooltip
                      class="item"
                      effect="dark"
                      :content="actor.representativeWork"
                      placement="top"
                  >
                <span class="work-ellipsis">
                  🎬 代表作：{{ actor.representativeWork }}
                </span>
                  </el-tooltip>
                </div>
              </li>
            </ol>
          </div>
        </section>

        <!-- 🎬 最受关注导演 -->
        <section class="page page-people-director">
          <div class="ranking-section director-bg">
            <h2 class="section-title">🎬 最受关注导演</h2>
            <ol class="person-list">
              <li
                  v-for="(director, index) in topDirectors"
                  :key="index"
                  class="person-item"
              >
                <div class="person-info">
                  <strong>{{ director.name }}</strong>
                  <span>（{{ director.count }} 次）</span>
                </div>
                <div v-if="director.representativeWorks" class="work-line">
                  <el-tooltip
                      class="item"
                      effect="dark"
                      :content="director.representativeWorks"
                      placement="top"
                  >
                <span class="work-ellipsis">
                  🎬 代表作：{{ director.representativeWorks }}
                </span>
                  </el-tooltip>
                </div>
              </li>
            </ol>
          </div>
        </section>
      </div>
    </section>

    <!-- 单元二：电影榜 -->
    <section ref="unitMovie" class="unit-section">
      <h1 class="unit-title">电影榜</h1>

      <section
          v-for="tab in tabs"
          :key="tab.name"
          class="page page-movie"
          :id="'section-' + tab.name"
          :style="getBackgroundStyle(tab.name)"
      >
        <div class="bg-mask">
          <h2 class="movie-section-title">{{ tab.label }}</h2>

          <el-row :gutter="20">
            <el-col :span="6" v-for="movie in movieLists[tab.name]" :key="movie.id">
              <el-card
                  class="movie-card"
                  :body-style="{ padding: '10px' }"
                  shadow="hover"
                  @mouseenter="showDetail(movie.id)"
                  @mouseleave="hideDetail"
                  @click="goToMovieDetail(movie.id)"
              >
                <div class="movie-content">
                  <div class="movie-img-wrapper">
                    <img
                        :src="movie.poster || movie.coverUrl"
                        alt="cover"
                        class="movie-img"
                    />
                    <div class="score-tag">
                      {{ movie.finalScore || movie.rating || movie.avgScore }}
                    </div>
                  </div>
                  <div class="movie-info">
                    <p class="title" :title="movie.title">{{ movie.title }}</p>
                    <p class="director" v-if="movie.director">导演: {{ movie.director }}</p>
                    <p class="vote-count" v-if="movie.voteCount">投票数：{{ movie.voteCount }}</p>
                  </div>
                </div>

                <transition name="fade">
                  <div class="movie-detail-popup" v-if="detailMovieId === movie.id">
                    <p class="desc" v-if="movie.description">{{ movie.description }}</p>
                    <p class="release-date" v-if="movie.releaseDate">
                      上映日期: {{ movie.releaseDate }}
                    </p>
                  </div>
                </transition>
              </el-card>
            </el-col>
          </el-row>

          <div class="more-btn-container">
            <el-button type="primary" @click="goToMore(tab.name)">
              更多
            </el-button>
          </div>
          
          <!-- 浮动光点效果 -->
          <div class="floating-particles">
            <div class="particle" v-for="i in 6" :key="i" :style="getParticleStyle(i)"></div>
          </div>
        </div>

      </section>
    </section>

    <!-- 底部悬浮导航按钮 -->
    <div class="unit-nav-buttons" v-if="showUnitNav">
      <el-button
          size="small"
          :disabled="currentUnit === 0"
          @click="scrollToUnit(currentUnit - 1)"
      >上一单元</el-button
      >
      <el-button
          size="small"
          :disabled="currentUnit === totalUnits - 1"
          @click="scrollToUnit(currentUnit + 1)"
      >下一单元</el-button
      >
    </div>
  </div>
</template>


<script>
import {
  getTopSuspenseMovies,
  getHighScoreMovies,
  getLatestMovies,
  getActionThrillerMovies,
  getFantasySciFiMovies,
  getNolanMovies,
  getChineseMovies,
} from '@/api/movie/movie.js'

import { fetchTopActors, fetchTopDirectors } from '@/api/favorite/favorite.js'

export default {
  name: 'TopMovieBoard',
  data() {
    return {
      detailMovieId: null,
      topActors: [],
      topDirectors: [],
      tabs: [
        { name: 'latest', label: '最新上映' },
        { name: 'highscore', label: '高分佳片' },
        { name: 'chinese', label: '华语佳片' },
        { name: 'action', label: '动作犯罪惊悚' },
        { name: 'scifi', label: '奇幻科幻' },
        { name: 'suspense', label: '悬疑烧脑片' },
        { name: 'nolan', label: '诺兰导演精选' },
      ],
      movieLists: {
        latest: [],
        highscore: [],
        chinese: [],
        scifi: [],
        action: [],
        suspense: [],
        nolan: [],

      },
      scrollRatio: 0,
      currentUnit: 0,
      totalUnits: 2,
      showUnitNav: false,
    }
  },
  watch: {
    '$route.query': {
      handler(newQuery) {
        this.restorePosition(newQuery)
      },
      immediate: false
    }
  },
  mounted() {
    // 恢复位置（如果有的话）
    this.restorePosition(this.$route.query)
  },
  computed: {
    backgroundStyle() {
      const colors = [
        ['#fff3e0', '#ffe0b2'], // 人物榜 bg-people
        ['#2c3e50', '#4ca1af'], // suspense
        ['#7b4397', '#dc2430'], // highscore
        ['#1f4037', '#99f2c8'], // latest
        ['#cb2d3e', '#ef473a'], // action
        ['#0f2027', '#2c5364'], // scifi
        ['#1f4037', '#99f2c8'], // nolan
        ['#f7971e', '#ffd200'], // chinese
      ]

      const totalSections = colors.length - 1
      const pos = this.scrollRatio * totalSections
      const index = Math.floor(pos)
      const t = pos - index

      const lerpColor = (c1, c2, t) => {
        const hexToRgb = (hex) => {
          const m = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)
          return m
              ? [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)]
              : [0, 0, 0]
        }
        const rgbToHex = (r, g, b) => {
          const toHex = (n) => n.toString(16).padStart(2, '0')
          return `#${toHex(r)}${toHex(g)}${toHex(b)}`
        }
        const rgb1 = hexToRgb(c1)
        const rgb2 = hexToRgb(c2)
        const rgb = rgb1.map((v, i) => Math.round(v + (rgb2[i] - v) * t))
        return rgbToHex(...rgb)
      }

      if (index >= totalSections) {
        return `linear-gradient(135deg, ${colors[totalSections][0]}, ${colors[totalSections][1]})`
      }
      const c1 = colors[index]
      const c2 = colors[index + 1]

      const color1 = lerpColor(c1[0], c2[0], t)
      const color2 = lerpColor(c1[1], c2[1], t)

      return `linear-gradient(135deg, ${color1}, ${color2})`
    },
  },
  methods: {
    getBackgroundStyle(tabName) {
      const movie = this.movieLists[tabName]?.[0]; // 榜首电影
      const bgUrl = movie?.poster || movie?.coverUrl;
      const tabIndex = this.tabs.findIndex(tab => tab.name === tabName);
      
      // 定义每个榜单的主题色和氛围
      const themeStyles = {
        latest: {
          gradient: 'linear-gradient(135deg, rgba(76, 161, 175, 0.8), rgba(31, 64, 55, 0.9))',
          particle: 'rgba(152, 251, 200, 0.3)',
          glow: '#99f2c8'
        },
        highscore: {
          gradient: 'linear-gradient(135deg, rgba(220, 36, 48, 0.8), rgba(123, 67, 151, 0.9))',
          particle: 'rgba(255, 215, 0, 0.4)',
          glow: '#ffd700'
        },
        chinese: {
          gradient: 'linear-gradient(135deg, rgba(255, 210, 0, 0.8), rgba(247, 151, 30, 0.9))',
          particle: 'rgba(255, 69, 0, 0.3)',
          glow: '#ff4500'
        },
        action: {
          gradient: 'linear-gradient(135deg, rgba(239, 71, 58, 0.8), rgba(203, 45, 62, 0.9))',
          particle: 'rgba(255, 0, 0, 0.4)',
          glow: '#ff0000'
        },
        scifi: {
          gradient: 'linear-gradient(135deg, rgba(44, 83, 100, 0.8), rgba(15, 32, 39, 0.9))',
          particle: 'rgba(0, 255, 255, 0.3)',
          glow: '#00ffff'
        },
        suspense: {
          gradient: 'linear-gradient(135deg, rgba(44, 62, 80, 0.8), rgba(76, 161, 175, 0.9))',
          particle: 'rgba(138, 43, 226, 0.3)',
          glow: '#8a2be2'
        },
        nolan: {
          gradient: 'linear-gradient(135deg, rgba(31, 64, 55, 0.8), rgba(153, 242, 200, 0.9))',
          particle: 'rgba(50, 205, 50, 0.3)',
          glow: '#32cd32'
        }
      };

      const theme = themeStyles[tabName] || themeStyles.latest;
      
      if (!bgUrl) {
        return {
          '--theme-glow': theme.glow,
          '--theme-particle': theme.particle,
          '--theme-gradient': theme.gradient
        };
      }

      return {
        '--theme-glow': theme.glow,
        '--theme-particle': theme.particle,
        '--bg-image': `url(${bgUrl})`,
        '--theme-gradient': theme.gradient
      };
    },
    handleScroll() {
      const container = this.$refs.container
      if (!container) return

      const scrollTop = container.scrollTop
      const movieTop = this.$refs.unitMovie.offsetTop
      const containerHeight = container.clientHeight

      // 显示导航按钮条件：当内容高度大于容器且滚动到一定位置时显示
      this.showUnitNav = container.scrollHeight > containerHeight

      // 计算当前单元，根据滚动距离切换
      if (scrollTop + containerHeight / 2 < movieTop) {
        this.currentUnit = 0 // 人物榜
      } else {
        this.currentUnit = 1 // 电影榜
      }
    },
    scrollToUnit(unitIndex) {
      const container = this.$refs.container
      if (!container) return
      if (unitIndex === 0) {
        container.scrollTo({ top: this.$refs.unitPeople.offsetTop, behavior: 'smooth' })
      } else if (unitIndex === 1) {
        container.scrollTo({ top: this.$refs.unitMovie.offsetTop, behavior: 'smooth' })
      }
    },
    restorePosition(query) {
      this.$nextTick(() => {
        const container = this.$refs.container
        if (!container) return
        
        const scrollTop = query.scrollTop
        
        if (scrollTop) {
          // 直接恢复到精确的滚动位置
          container.scrollTop = Number(scrollTop)
        }
      })
    },
    loadMovies() {
      const tabs = this.tabs

      const loaders = {
        latest: getLatestMovies,
        highscore: getHighScoreMovies,
        chinese: getChineseMovies,
        scifi: getFantasySciFiMovies,
        suspense: getTopSuspenseMovies,
        action: getActionThrillerMovies,
        nolan: getNolanMovies,

      }

      tabs.forEach((tab) => {
        const loader = loaders[tab.name]
        if (!loader) {
          console.warn(`未找到 ${tab.name} 的加载函数`)
          return
        }

        loader()
            .then((res) => {
              const data = res.data
              if (!Array.isArray(data)) {
                console.error('接口返回数据不是数组', typeof data)
                // 设置空数组作为默认值
                this.movieLists[tab.name] = []
                return
              }
              const processed = data.map((movie) => {
                if (movie.poster && movie.poster.startsWith('http')) {
                  movie.poster = `https://images.weserv.nl/?url=${movie.poster.replace(
                      /^https?:\/\//,
                      ''
                  )}`
                }
                return movie
              })
              this.movieLists[tab.name] = processed
            })
            .catch((err) => {
              console.error(`加载 ${tab.label} 失败`, err)
              // 设置空数组作为默认值，避免页面崩溃
              this.movieLists[tab.name] = []
            })
      })
    },
    loadRankings() {
      fetchTopActors()
        .then((data) => {
          this.topActors = data || []
        })
        .catch((err) => {
          console.error('加载演员排行榜失败', err)
          this.topActors = []
      })

      fetchTopDirectors()
        .then((data) => {
          this.topDirectors = data || []
        })
        .catch((err) => {
          console.error('加载导演排行榜失败', err)
          this.topDirectors = []
      })
    },
    showDetail(id) {
      this.detailMovieId = id
    },
    hideDetail() {
      this.detailMovieId = null
    },
    goToMore(name) {
      const container = this.$refs.container
      const scrollTop = container ? container.scrollTop : 0
      this.$router.push({
        name: 'MoreRank',
        params: { name },
        query: { scrollTop, currentUnit: this.currentUnit }
      })
    },
    goBack() {
      // 返回到主页面的年度榜单模块
      this.$router.push({ name: 'Home', query: { activeMenu: 'annual' } })
    },
    goToMovieDetail(movieId) {
      // 跳转到电影详情页面
      this.$router.push({
        path: `/movie/${movieId}`,
        query: { from: 'annual' }
      })
    },
    getParticleStyle(index) {
      const positions = [
        { left: '10%', top: '20%', delay: '0s' },
        { left: '80%', top: '30%', delay: '2s' },
        { left: '20%', top: '70%', delay: '4s' },
        { left: '90%', top: '60%', delay: '1s' },
        { left: '50%', top: '40%', delay: '3s' },
        { left: '70%', top: '80%', delay: '5s' }
      ];
      const pos = positions[index - 1] || positions[0];
      return {
        left: pos.left,
        top: pos.top,
        animationDelay: pos.delay
      };
    }
  },
  created() {
    this.loadRankings()
    this.loadMovies()
  },
}
</script>

<style scoped>

/* 顶部导航栏 */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.back-btn {
  background: none;
  border: none;
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateX(-2px);
}

/* 整体布局 */
.top-movie-board {
  height: 100vh;
  padding-top: 70px; /* 为导航栏留出空间 */
  overflow-y: auto;
  scroll-behavior: smooth;
  transition: background 0.6s ease;
  position: relative;
}


/* 榜单页面,切换单元 */
.unit-section {
  padding: 40px 20px;
}

.unit-title {
  font-size: 70px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.unit-nav-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 10px;
}



/* 榜单页面,人物单元 */

.ranking-page {
  padding: 60px 0;
}

.page {
  padding: 60px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.5s;
}

/*最受欢迎演员和最受关注导演字样*/
.section-title {
  font-weight: 700;
  color: #333;
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
}


/* 人物榜单页面 */

.ranking-page {
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
  overflow-x: hidden;

}

.ranking-section {
  padding: 60px 20px;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-color: rgba(0, 0, 0, 0.1); /* 轻微遮罩，保持背景图清晰 */
}
.page-people-actor {
  background: 
    linear-gradient(135deg, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.3)),
    url('@/assets/images/AnualBackground/actorBackground.png');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  border-radius: 24px;
  padding: 40px 20px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.page-people-actor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(102, 126, 234, 0.1) 0%, transparent 50%);
  animation: actorGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.page-people-director {
  background: 
    linear-gradient(135deg, rgba(255, 69, 0, 0.4), rgba(255, 140, 0, 0.3)),
    url('@/assets/images/AnualBackground/derectorBackground.png');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  border-radius: 24px;
  padding: 40px 20px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.page-people-director::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 30%, rgba(255, 69, 0, 0.05) 0%, transparent 50%);
  animation: directorGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes actorGlow {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes directorGlow {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0.9;
    transform: scale(1.01);
  }
}

.section-title {
  color: #f8f9fa;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 40px;
  text-shadow: 2px 2px 6px #000;
}

.person-list {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: auto;
}

.person-item {
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  padding: 16px 24px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease;
}

.person-item:hover {
  transform: scale(1.02);
}

.person-info {
  font-size: 20px;
  font-weight: 600;
}

.work-line {
  margin-left: 10px;
  margin-top: 8px;
  font-size: 16px;
  color: #ddd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.work-ellipsis {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  display: inline-block;
}


.person-item {
  margin-bottom: 14px;
  font-size: 16px;
}



/* 榜单页面,电影单元*/
.page {
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}
.page-movie {
  position: relative;
  min-height: 100vh;
  padding: 60px 20px;
  transition: all 0.8s ease;
  overflow: hidden;
  /* 保留上下滑动的蒙版背景，但不显示电影海报 */
  background: transparent;
}

/* 电影榜单背景蒙版和氛围效果 */
.page-movie .bg-mask {
  backdrop-filter: blur(2px) brightness(1.1);
  background: 
    var(--theme-gradient, linear-gradient(135deg, rgba(76, 161, 175, 0.8), rgba(31, 64, 55, 0.9))),
    var(--bg-image, none);
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: multiply;
  background-attachment: local, local;  /* 确保背景图只在容器内显示 */
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

/* 添加氛围粒子效果 */
.page-movie .bg-mask::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 30%, var(--theme-particle, rgba(255,255,255,0.1)) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, var(--theme-particle, rgba(255,255,255,0.1)) 0%, transparent 50%),
              radial-gradient(circle at 40% 80%, var(--theme-particle, rgba(255,255,255,0.05)) 0%, transparent 30%);
  animation: particleFloat 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* 添加发光边框效果 */
.page-movie .bg-mask::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    var(--theme-glow, #667eea) 0%, 
    transparent 25%, 
    transparent 75%, 
    var(--theme-glow, #667eea) 100%);
  border-radius: 22px;
  z-index: -1;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
    opacity: 1;
  }
  66% {
    transform: translateY(10px) rotate(240deg);
    opacity: 0.8;
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.01);
  }
}


/* 电影单元 */
.movie-card {
  cursor: pointer;
  margin-bottom: 20px;
  border-radius: 20px; /* 这里设置圆角大小，可以调整 */
  overflow: hidden;    /* 保证内容不会溢出圆角 */
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.movie-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
  border-color: var(--theme-glow, rgba(102, 126, 234, 0.15));
  backdrop-filter: blur(10px) brightness(1.2);
}

.movie-card:hover .movie-img {
  transform: scale(1.05);
}

.movie-card:active {
  transform: translateY(-4px);
}
.movie-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.movie-img-wrapper {
  position: relative;
  width: 100px;
  flex-shrink: 0;
}
.movie-img {
  width: 100px;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.3s ease;
}
.score-tag {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #ff9f1a;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 12px;
  font-weight: bold;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.movie-info {
  flex: 1;
  margin-left: 16px;
}
.movie-info .title {
  font-weight: bold;
  font-size: 16px;
  margin: 0 0 6px 0;
}
.movie-info p {
  margin: 2px 0;
  color: #666;
  font-size: 14px;
}



/* 更多信息的按钮*/
.more-btn-container {
  margin-top: 20px;
  text-align: center;
}

.more-btn-container .el-button {
  font-size: 18px !important;       /* 字体更大 */
  padding: 12px 36px !important;    /* 内边距更宽更高 */
  border-radius: 30px !important;   /* 大圆角 */
  background: linear-gradient(45deg, #42a5f5, #478ed1) !important; /* 蓝色渐变背景 */
  color: #fff !important;            /* 白字 */
  box-shadow: 0 4px 15px rgba(66, 165, 245, 0.6); /* 浮动阴影 */
  border: none !important;
  transition: all 0.3s ease;
}

.more-btn-container .el-button:hover {
  background: linear-gradient(45deg, #478ed1, #42a5f5) !important; /* 渐变反转 */
  box-shadow: 0 6px 25px rgba(66, 165, 245, 0.9);
  transform: translateY(-3px);
  cursor: pointer;
}
/* 电影主题名称 */
.movie-section-title {
  background: linear-gradient(45deg, 
    var(--theme-glow, #4facfe) 0%, 
    #ffffff 50%, 
    var(--theme-glow, #00f2fe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  font-size: 50px;
  font-weight: 800;
  margin: 50px 0 30px;
  position: relative;
  z-index: 10;
  text-shadow: 0 0 30px var(--theme-glow, #4facfe);
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  0% {
    filter: drop-shadow(0 0 10px var(--theme-glow, #4facfe));
  }
  100% {
    filter: drop-shadow(0 0 20px var(--theme-glow, #4facfe)) drop-shadow(0 0 30px var(--theme-glow, #4facfe));
  }
}

/* 浮动粒子效果 */
.floating-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, var(--theme-glow, #ffffff) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.6;
  animation: particleDrift 15s ease-in-out infinite;
}

@keyframes particleDrift {
  0%, 100% {
    transform: translateY(0px) translateX(0px) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-30px) translateX(20px) scale(1.2);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px) translateX(-15px) scale(0.8);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-40px) translateX(10px) scale(1.1);
    opacity: 0.9;
  }
}

</style>
